import React from 'react';
import { View } from '@tarojs/components';

import './scoreStar.scss';

interface ScoreStarProps {
  score: number;
  count?: number;
  size?: number;
  gap?: number;
  activeColor?: string;
  inactiveColor?: string;
}

const ScoreStar: React.FC<ScoreStarProps> = ({
  score = 5,
  count = 5,
  size = 20,
  gap = 10,
  activeColor = '#ffc107',
  inactiveColor = '#f0f0f0'
}) => {
  // 确保分数在0-最大星星数范围内
  const clampedScore = Math.min(Math.max(score, 0), count);
  
  // 创建星星容器样式对象
  const containerStyle = {
    '--star-size': `${size}px`,
    '--star-gap': `${gap}px`,
    '--active-color': activeColor,
    '--inactive-color': inactiveColor
  };
  
  // 生成星星元素
  const renderStars = () => {
    const stars: any = [];
    for (let i = 0; i < count; i++) {
      // 确定当前星星的填充百分比
      let fillPercent = 0;
      if (i < Math.floor(clampedScore)) {
        fillPercent = 100; // 完全填充
      } else if (i === Math.floor(clampedScore) && clampedScore % 1 > 0) {
        fillPercent = (clampedScore % 1) * 100; // 部分填充
      }
      
      stars.push(
        <View
          key={i}
          className="star"
          style={{ '--fill-percent': `${fillPercent}%` }}
        />
      );
    }
    
    return stars;
  };
  
  return (
    <View className="rating-container" style={containerStyle as React.CSSProperties}>
      {renderStars()}
    </View>
  );
};

export default ScoreStar;